/*
 * @ddescription: 自营订单列表/修改商品规格
 * @Author: along
 * @Date: 2020-10-28
 * @Last Modified by: mikey.zhaopeng
 * @Last Modified time: 2021-04-09 17:29:04
 */
<template>
    <div class="changeProduct">
        <el-dialog
            title="修改商品规格"
            :visible.sync="dialogProduct"
            width="640px"
            :close-on-click-modal="false"
            class="changeProductWp"
        >
            <div
                class="zd-refund-main"
                v-loading="loading"
            >
                <div class="zd-shop">
                    <p class="zd-shop-title">
                        当前购买商品
                    </p>
                    <div class="zd-shop-wrap">
                        <div class="wrap-left">
                            <img :src="goods_product_list.product_image">
                        </div>
                        <div class="wrap-right">
                            <p class="wrap-right-title">
                                商品名称: {{ goods_product_name }}
                            </p>
                            <p class="wrap-right-title">
                                商品价格:
                                <span style="color:#FF3030;font-size:18px;font-weight:500">
                                    ¥{{ goods_product_list.tuan_price }}
                                </span>
                            </p>
                            <p class="wrap-right-title">
                                商品库存: {{ goods_product_list.product_stock }}件
                            </p>
                            <p class="wrap-right-title">
                                规格:
                                <span
                                    v-for="(item,index) in goods_product_list.spec_list"
                                    :key="index"
                                >
                                    {{ item.spec_name + '-' + item.spec_value }} {{ (index == 0 && goods_product_list.spec_list.length == 1) || (index == goods_product_list.spec_list.length - 1) ? '' : '、' }}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div
                    class="zd-shop"
                    v-if="JSON.stringify(goods_spec_new_list) !== '{}'"
                >
                    <p class="zd-shop-title">
                        替换规格商品
                    </p>
                    <div class="zd-shop-wrap">
                        <div class="wrap-left">
                            <img
                                :src="goods_spec_new_list.product_image"
                            >
                        </div>
                        <div class="wrap-right">
                            <p class="wrap-right-title">
                                商品价格:
                                <span style="color:#FF3030;font-size:18px;font-weight:500">
                                    ¥{{ goods_spec_new_list.product_price }}
                                </span>
                            </p>
                            <p class="wrap-right-title">
                                商品库存: {{ goods_spec_new_list.product_stock }}件
                            </p>
                            <p class="wrap-right-title">
                                规格:
                                <span
                                    v-for="(item,index) in goods_spec_new_list.spec_list"
                                    :key="index"
                                >
                                    {{ item.spec_name + '-' + item.spec_value }} {{ (index == 0 && goods_product_list.spec_list.length == 1) || (index == goods_product_list.spec_list.length - 1) ? '' : '、' }}
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
                <div class="zd-spec">
                    <div
                        v-for="(item,index) in goods_spec_list"
                        :key="index"
                    >
                        <p class="zd-spec-title">
                            {{ item.spec_name }}
                        </p>
                        <div class="spec-wrap">
                            <p
                                v-for="(option,i) in item.spec_value"
                                :key="i"
                                class="zd-spec-text"
                                :class=" option.flag ? 'zd-spec-text-active' : 'zd-spec-text' "
                                @click="fnSelectSpec(option, item.spec_name)"
                                :style="{pointerEvents: option.flag ? 'none' : ''}"
                            >
                                {{ option.value }}
                                <span
                                    v-if="option.label"
                                    class="zd-spec-label"
                                >
                                    已购
                                </span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
            <span
                slot="footer"
                style="display:flex;justify-content:center;margin-bottom:10px;margin-top:10px"
            >
                <el-button
                    @click="dialogProduct = false"
                    style="width:100px;height:32px"
                    size="small"
                >
                    取 消
                </el-button>
                <el-button
                    type="primary"
                    style="width:100px;height:32px;margin-left:60px"
                    size="small"
                    @click="fnConfirmShop()"
                >
                    确 定
                </el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script>
export default {
    name: 'ChangeProduct',
    data () {
        return {
            dialogProduct: false,
            row: {},
            order_no: '',
            goods_spec_list: [],//默认规格数据
            goods_spec_new_list: {},//修改后规格数据
            goods_product_name: '',//商品名称
            goods_product_list: {},//规格数据
            goods_specs: [],//默认规格
            specList: [],//全部规格数据
            product_no: '',//规格编号
            price: '',//当前商品价格
            hire_finance_complete_time_change_last_count: '',//订单结算时间剩余可修改次数
            loading: false
        };
    },
    mounted () {
    },
    methods: {
        /**
         * @description 打开规格弹窗
         */
        show () {
            this.dialogProduct = true;
            this.loading = true;
        },

        /**
         * @description 关闭规格弹窗
         */
        close () {
            this.dialogProduct = false;
        },

        /**
         * @description 设置规格数据
         */
        set (object) {
            const data = JSON.parse(object);

            console.log('data', data);

            this.row = data.row;
            this.order_no = data.order_no;
            this.fnChangeShopSpc(data.row);
        },

        /**
         * 修改商品规格
         */
        fnChangeShopSpc (row) {
            let data = row.goods_product_info.goods_specs.reduce((cur,next) => {
                cur.push({
                    spec_name: next.spec_name,
                    spec_value: next.spec_value
                });

                return cur;
            },[]);

            this.goods_product_name = row.goods_info.title;
            let goods_specs = data.reduce((cur,next) => {
                cur.push(next.spec_value);
                return cur;
            }, []);

            this.$post('/Goods/productInfo',{
                goods_no: row.goods_info.goods_no
            }, resp => {
                if(resp.code == 1) {
                    let list = resp.data.goods_product_list;
                    let specList = resp.data.goods_spec_list;
                    let productList = [];
                    let obj = {
                        spec_name: ''
                    };

                    this.specList = resp.data.goods_product_list;//存储商品全部规格数据

                    let index = 0;

                    list.forEach(option => {
                        if(JSON.stringify(data) == JSON.stringify(option.spec_list)) {
                            this.goods_product_list = option;
                            this.price = option.tuan_price;
                        } else {
                            index++;
                        }
                    });

                    if(index == list.length) {
                        this.$notify({
                            title: '警告',
                            message: '商品规格已修改,未查询到此规格',
                            duration: 2000,
                            type: 'warning'
                        });
                        this.loading = false;
                        return false;
                    }

                    for(let key in specList) {
                        if(obj.spec_name !== specList[key].spec_name) {
                            obj.spec_name = specList[key].spec_name;

                            productList.push({
                                spec_name: specList[key].spec_name,
                                spec_value: [{
                                    value: specList[key].spec_value
                                }]
                            });
                        } else {
                            for(let i in productList) {
                                if(productList[i].spec_name == obj.spec_name) {
                                    productList[i].spec_value = productList[i].spec_value.concat({
                                        value: specList[key].spec_value
                                    });
                                }
                            }
                        }
                    }

                    productList.filter(item => {
                        item.spec_value.filter(option => {
                            if(goods_specs.includes(option.value)) {
                                option.flag = true;
                                option.label = true;
                            } else {
                                option.flag = false;
                                option.label = false;
                            }
                        });
                    });

                    this.goods_spec_list = productList;//规格
                    this.loading = false;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * 选择规格
         */
        fnSelectSpec (row, name) {
            let spec_list = this.goods_product_list.spec_list;

            //价格不一致时不可点击
            let items = this.setValue(row, name, spec_list, true);

            if(Number(this.price) !== Number(items.product_price)) {
                this.$notify({
                    title: '警告',
                    message: '仅限更换与已支付价格相同的规格',
                    duration: 2000,
                    type: 'warning'
                });
                return;
            }

            //无库存时不可点击
            if(Number(items.product_stock) == 0) {
                this.$notify({
                    title: '警告',
                    message: '库存不足',
                    duration: 2000,
                    type: 'warning'
                });
                return;
            }

            this.goods_spec_list.filter(item => {
                if(name == item.spec_name) {
                    item.spec_value.filter(option => {
                        if(option.value == row.value) {
                            option.flag = true;
                        } else {
                            option.flag = false;
                        }
                    });
                }
            });

            this.setValue(row, name, spec_list, false);
        },

        /**
         * 数据比对
         */
        setValue (row, name, spec_list, type) {
            let items = '';
            let list = this.goods_spec_new_list.spec_list || JSON.parse(JSON.stringify(spec_list));
            let arr = JSON.parse(JSON.stringify(this.specList));
            let newList = JSON.parse(JSON.stringify(list));

            newList.filter(item => {
                if(item.spec_name == name) {
                    item.spec_value = row.value;
                }
            });

            arr.filter(item => {
                if(JSON.stringify(item.spec_list) == JSON.stringify(newList)) {
                    if(!type) {
                        this.product_no = item.product_no;
                        this.goods_spec_new_list = item;
                    }
                    items = item;
                }
            });

            if(type) {
                return items;
            }
        },

        /**
         * 确定修改
         */
        fnConfirmShop () {
            this.$post('/ShopGoodsOrder/changeProduct', {
                order_no: this.order_no,
                product_no: this.product_no,
                index: this.row.index
            }, resp => {
                if (resp.code == 1) {
                    this.$emit('update');//更新详情
                    this.$notify({
                        title: '提示',
                        message: '修改成功',
                        duration: 2000,
                        type: 'success'
                    });
                    this.dialogProduct = !this.dialogProduct;
                } else {
                    this.$notify({
                        title: '警告',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },
    }
};
</script>

<style lang="less" scoped>
.changeProduct {
    .zd-shop {
        box-sizing: border-box;
        padding: 0 30px;
        &-title {
            font-size: 14px;
            color: #333333;
            font-weight: 500;
            margin-bottom: 12px;
        }
        &-wrap {
            display: flex;
            margin-bottom: 40px;
            .wrap-left {
               width: 120px;
               height: 120px;
               margin-right: 12px;
               img {
                    width:120px;
                    height:120px;
                    border-radius:4px;
               }
            }
            .wrap-right {
                display: flex;
                flex-direction: column;
                &-title {
                    font-size: 14px;
                    color: #555;
                    line-height: 20px;
                    margin-bottom: 12px;
                }
            }
        }
    }
    .zd-spec {
        box-sizing: border-box;
        padding: 0 30px;
        &-title {
            font-size: 14px;
            color: #333;
            margin: 12px 0 12px 0;
        }
        .spec-wrap {
            display: flex;
            flex-wrap: wrap;
            .zd-spec-text {
                padding: 10px;
                color: #333333;
                font-size: 14px;
                border-radius:2px;
                box-sizing: border-box;
                border: 1px rgba(240,240,240,1) solid;
                background: rgba(240,240,240,1);
                margin-right: 14px;
                cursor: pointer;
                margin-bottom: 12px;
                position: relative;
                .zd-spec-label {
                    position: absolute;
                    height: 16px;
                    padding: 2px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    border-radius: 4px;
                    color: #ffffff;
                    font-size: 10px;
                    right: -12px;
                    top: -8px;
                    background: #EE4E59;
                }
            }
            .zd-spec-text-active {
                background:rgba(249,91,86,0.1);
                color: #F95B56;
                border:1px solid rgba(249,91,86,1);
            }
        }
    }
    .zd-refund-main {
        // height: 450px;
        max-height: 500px;
        overflow-y: auto;
        overflow-x: hidden;
    }
    .zd-time {
        cursor: pointer;
        color: #20A0FF;
    }
    .zd-extend-text {
        font-size: 12px;
        line-height: 18px;
        color: #666;
    }
    .extend-wrap {
        display: flex;
        font-size: 14px;
        color: #000;
        align-items: center;
        margin-top: 24px;
    }
}
</style>

<style lang="less">
.changeProductWp {
    .el-dialog__body {
        padding-bottom: 0;
    }
}
</style>